<!--
 * @Author: yuanweijiang
 * @Date: 2024-01-04 10:08:05
 * @LastEditors: yuanweijiang
-->
<template>
	<el-dialog :title="'项目' + title" min-width="800" v-model="visible" :close-on-click-modal="false" :destroy-on-close="true" draggable>
		<el-table
			ref="tableRef"
			:data="state.dataList"
			row-key="path"
			style="width: 100%"
			:cell-style="tableStyle.cellStyle"
			:header-cell-style="tableStyle?.headerCellStyle"
		>
			<el-table-column prop="type" label="类型" v-if="title === '图层'">
				<template #default="scope">
					<i class="iconfont" :class="classFilter(scope.row.storeType)"></i>
				</template>
			</el-table-column>
			<el-table-column v-for="item in title === '文件' ? propList : propListProject" :key="item.prop" :prop="item.prop" :label="item.label">
				<template #default="scope" v-if="item.template">{{ filterType[scope.row[item.prop]] }} </template>
				<template #default="scope" v-if="item.dataType">{{ filterName[scope.row[item.prop]] }} </template>
			</el-table-column>
		</el-table>
	</el-dialog>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { BasicTableProps, useTable } from '/@/hooks/table';
import { fileDataSourceLsit } from '/@/api/project/index';
const visible = ref(false);
const title = ref('');
const tableStyle = ref({
	cellStyle: { textAlign: 'center' },
	headerCellStyle: {
		textAlign: 'center',
		background: '#CED6E7',
		color: '#000',
	},
});
const filterType = ref({
	dataStore: '矢量数据',
	coverageStore: '栅格数据',
});
const filterName = ref({
	'1': '矢量数据',
	'2': '栅格数据',
	'3': '3D数据',
});
const propList = ref([
	{
		prop: 'fileNameCh',
		label: '文件名称',
	},
	{
		prop: 'fileDataName',
		label: '源文件名称',
	},
	{
		prop: 'dataType',
		label: '文件类型',
		dataType: true,
	},
	{
		prop: 'createTime',
		label: '创建时间',
	},
]);
const propListProject = ref([
	{
		prop: 'title',
		label: '图层名称',
	},
	{
		prop: 'storeName',
		label: '源文件名称',
	},
	{
		prop: 'storeType',
		label: '文件类型',
		template: true,
	},
	{
		prop: 'createTime',
		label: '创建时间',
	},
]);
const state: BasicTableProps = reactive<BasicTableProps>({
	pageList: fileDataSourceLsit,
	createdIsNeed: false,
	queryForm: {},
	isPage: false,
	pagination: {
		current: 1,
		size: 99,
	},
});
const { getDataList } = useTable(state);
function classFilter(type: string) {
	let className = null;
	switch (type) {
		case 'dataStore':
			className = 'icon-shiliangtu';
			break;
		case 'coverageStore':
			className = 'icon-jiantou-';
			break;
		default:
			className = 'icon-a-3d1';
			break;
	}
	return className;
}
function openDialog() {
	visible.value = true;
}
watch(visible, (n) => {
	n ? getDataList() : null;
});
defineExpose({
	openDialog,
	title,
	state,
});
</script>
